<script setup>
  import { ToskList } from '@/apis/task.js'
  import { toast } from '@/utils/utils.js'
  import { onLoad } from '@dcloudio/uni-app'
  import { ref, onMounted } from 'vue'

  const pickUpList = ref([]) // 任务列表数据
  const pages = ref(0) // 总页码
  const page = ref(1) // 控制滚动条让页码加加，来发请求

  const statrTime = ref('')
  const endTime = ref('')

  const loadData = async () => {
    const res = await ToskList({
      page: page.value,
      pageSize: 5,
      status: 6,
    })
    console.log(res)
    //添加模拟数据
    if (!res.data.items) {
      res.data.items = []
    }
    const first = res.data.items[0]
    for (let i = 0; i < 5; i++) {
      res.data.items.push({ ...first, enablePickUp: i % 2 === 8 })
    }
    for (const v of res.data.items) {
      //如果实际发车时间存在就用实际车时间，否则用当前时间
      const actualTime = v.actualDepartureTime
        ? new Date(v.actualDepartureTime).getTime()
        : Date.now()
      //如果实际发车时间或当前时间大于计划发车时间就是延时了
      v.__delayed = actualTime > new Date(v.planDepartureTime).getTime()
    }
    pages.value = res.data.pages
    pickUpList.value.push(...res.data.items)
    console.log(pickUpList.value)
    toast('加载成功')
  }

  // //滚动条加载数据
  const onScrollToLower = () => {
    if (page.value >= pages.value) return toast('没有更多了')
    page.value++
    loadData()
  }

  // //下拉刷新
  const refreshing = ref(false)
  const onRefresh = async () => {
    refreshing.value = true
    // 刷新：重新加载第一页的数据，将现有的数据清空
    page.value = 1
    pickUpList.value = []
    try {
      await loadData()
    } finally {
      refreshing.value = false
    }
  }

  const starTimechange = (e) => {
    statrTime.value = e.detail.value
    // console.log(e)
  }

  const endTimechange = (e) => {
    endTime.value = e.detail.value
    // console.log(e)
  }

  onMounted(async () => {
    console.log(789)
    await loadData()
  })
</script>

<template>
  <view class="task-search">
    <view class="search-bar">
      <text class="iconfont icon-search"></text>
      <input class="input" type="text" placeholder="输入任务编号" />
    </view>
    <view class="filter-bar">
      <picker class="picker" mode="date" @change="starTimechange">{{
        statrTime || '2023.05.20'
      }}</picker>
      <text class="text">至</text>
      <picker class="picker" mode="date" @change="endTimechange">{{
        endTime || '结束时间'
      }}</picker>
      <button disabled class="button">筛选</button>
    </view>
  </view>
  <scroll-view
    scroll-y
    refresher-enabled
    :refresher-triggered="refreshing"
    class="scroll-view"
    @scrolltolower="onScrollToLower"
    @refresherrefresh="onRefresh"
  >
    <view class="scroll-view-wrapper" v-for="v of pickUpList" :key="v.id">
      <view class="task-card">
        <navigator hover-class="none" :url="`/subpkg_task/detail/index?id=${v.id}`">
          <view class="header">
            <text class="no">任务编号:{{ v.transportTaskId }}</text>
            <text class="status" v-if="v.__delayed">已延迟</text>
          </view>
          <view class="body">
            <view class="timeline">
              <view class="line">{{ v.startAddress }}</view>
              <view class="line">{{ v.endAddress }}</view>
            </view>
          </view>
        </navigator>
        <view class="footer">
          <view class="label">提货时间</view>
          <view class="time">{{ v.planDepartureTime }}</view>
          <view
            hover-class="none"
            v-if="v.enablePickUp == true"
            url="/subpkg_task/pickup/index"
            class="action"
            >提货</view
          >
          <view hover-class="none" v-else disabled url="/subpkg_task/pickup/index" class="action"
            >提货</view
          >
        </view>
      </view>

      <!-- <view class="task-card">
        <navigator hover-class="none" url="/subpkg_task/detail/index?id=001">
          <view class="header">
            <text class="no">任务编号: XAHH1234567</text>
          </view>
          <view class="body">
            <view class="timeline">
              <view class="line">北京市昌平区回龙观街道西三旗桥东金燕龙写字楼8877号</view>
              <view class="line">河南省郑州市路北区北清路99号</view>
            </view>
          </view>
        </navigator>
        <view class="footer">
          <view class="label">提货时间</view>
          <view class="time">2022.05.04 13:00</view>
          <button disabled class="action">提货</button>
        </view>
      </view> -->
      <view v-if="false" class="task-blank">无待提货物</view>
    </view>
  </scroll-view>
</template>

<style lang="scss" scoped>
  @import './styles.scss';

  .task-search {
    padding: 30rpx;
    // margin-top: -1rpx;
    background-color: #fff;
    border-bottom: 1rpx solid #eee;

    .search-bar {
      position: relative;

      .icon-search {
        position: absolute;
        top: 22rpx;
        left: 24rpx;
        color: $uni-secondary-color;
        font-size: $uni-font-size-small;
      }

      .input {
        height: 72rpx;
        background-color: #f4f4f4;
        border-radius: 72rpx;
        padding-left: 72rpx;
        font-size: $uni-font-size-small;
      }
    }

    .filter-bar {
      display: flex;
      margin-top: 30rpx;
      font-size: $uni-font-size-small;
      text-align: center;
      line-height: 64rpx;
      color: $uni-secondary-color;

      .picker {
        width: 230rpx;
        height: 64rpx;
        border-radius: 64rpx;
        background-color: $uni-bg-color;
      }

      .text {
        margin: 0 24rpx;
      }

      .button {
        width: 120rpx;
        height: 64rpx;
        padding: 0;
        margin-left: 40rpx;
        line-height: 64rpx;
        border-radius: 64rpx;
        font-size: $uni-font-size-small;
        color: #fff;
        background-color: $uni-primary;

        &[disabled] {
          background-color: #fadcd9;
        }
      }
    }
  }
</style>
